<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link href="/static/css/style.css" rel='stylesheet' type='text/css' />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="App Loction Form,Login Forms,Sign up Forms,Registration Forms,News latter Forms,Elements"./>
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <style type="text/css">

        p{
            color: black;
            font-size: smaller;
        }
        label{

        }
    </style>
    <script src="/static/jquery-3.3.1.min.js"></script>
    <script src="/static/jquery.cookie.js"></script>
    <script type="text/javascript">


           //ajax请求
         $(document).ready(function () {
            $("#login").click(function () {

                username = $('#user').val();
                password = $('#pswd').val();

                $.ajax({
                    url: '/login/',
                    data: {'username': username, 'password': password},
                    type: 'post',

                    success: function (ret) {

                        if (ret['flag'] == 'usererror') {
                            $('#message1').show().text('用户名为空或不存在').css({color: 'red'});
                        }
                        if (ret['flag']!= 'usererror') {
                            $('#message1').show().text('用户名正确').css({color: '#0BE093'});
                        }
                        if (ret['flag'] == 'nopass') {
                            $('#message2').show().text('密码必填').css({color: 'red'});
                        }
                        if (ret['flag'] == 'passerror') {
                            $('#message2').show().text('密码错误').css({color: 'red'});
                        }
                        if(ret['flag']=='ok'){
                            $('#message2').show().text('密码正确').css({color: '#0BE093'});
                            if(ret['session']==null){
                                window.location.href ='/main/'
                            }
                            else {
                                 window.location.href =ret['session']
                            }
                        }

                    }
                });
            })
        });

//cookie记住密码




  //记住用户名密码
  window.onload=function () {

    var oForm = document.getElementById('loginForm');
            var oUser = document.getElementById('user');
            var oPswd = document.getElementById('pswd');
            var oRemember = document.getElementById('remember');
            //页面初始化时，如果帐号密码cookie存在则填充
            if(getCookie('user') && getCookie('pswd')){
              oUser.value = getCookie('user');
              oPswd.value = getCookie('pswd');
              oRemember.checked = true;
            }
            //复选框勾选状态发生改变时，如果未勾选则清除cookie
            oRemember.onclick = function(){
              if(!this.checked){
                delCookie('user');
                delCookie('pswd');
              }
            };



            //点击事件触发时，如果复选框是勾选状态则保存cookie
            oForm.onclick = function(){
                {#alert(4396);#}
              if(remember.checked){
                setCookie('user',oUser.value,7); //保存帐号到cookie，有效期7天
                setCookie('pswd',oPswd.value,7); //保存密码到cookie，有效期7天
              }
            };

          //设置cookie
          function setCookie(name,value,day){
            var date = new Date();
            date.setDate(date.getDate() + day);
            document.cookie = name + '=' + value + ';expires='+ date;
          };
          //获取cookie
          function getCookie(name){
            var reg = RegExp(name+'=([^;]+)');
            var arr = document.cookie.match(reg);
            if(arr){
              return arr[1];
            }else{
              return '';
            }
          };

          //删除cookie
          function delCookie(name){
            setCookie(name,null,-1);
          };
  }






    </script>

</head>
<body >
        <div class="app-location">
            <h2><strong>Welcome to <a href="/main/" style="font-size: larger">KuYue</a></strong></h2>
            <div class="line"><span></span></div>
{#             <div class="location"><img src="/static/image/location.png" class="img-responsive" alt="" /></div>#}
            <form action="" onsubmit="return false;" name="myform" id="loginForm">
                    <input type="text" class="text" placeholder="手机号" id="user" name="username" onFocus="this.value = '';" onmouseout="formcheck()"  oncut="return false">
                    <p id="message1"></p>
                    <input type="password"  onmouseout="formcheck()" id="pswd" name="password" oncopy="return false" oncut="return false" oncontextmenu="return false"  onpaste="return false" onselectstart="return false"  onFocus="this.value = '';" >
                    <p id="message2"></p>
                    <label><input type="checkbox" name="checkbox" id="remember">记住密码 </label>
                    <div class="submit"> <input type="button" id="login"  value="立即登录" ></div>


                <div class="clear"></div>
                <div class="new">
                        <h3><a href="#">Forgot password ?</a></h3>
                        <h4><a href="/register/">No account ? Register</a></h4>
                        <div class="clear"></div>
                </div>
            </form>
        </div>
        <!--start-copyright-->
        <div class="copy-right">
                {#<p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>#}
        </div>
    <!--//end-copyright-->



</body>
</html>

